
<template>

  <div>

    <el-dialog title="查询制定任务" :visible="visible" @close="visible=false">
      <el-form ref="form" label-width="80px">
        任务名称：<el-input v-model="input1" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-form ref="form" label-width="80px">
        任务状态： <el-select v-model="region" style="width: 200px" placeholder="请选择活动区域" label="right">
          <el-option label="待分配" value="待分配"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已分配" value="已分配"></el-option>
          <el-option label="执行中" value="执行中"></el-option>
        </el-select>
      </el-form>
      <el-form ref="form" label-width="80px">
        下发人员：<el-input v-model="input2" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-form ref="form" label-width="80px">
        下发时间：<span class="demonstration" style="width: 200px" label="right"></span>
        <el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>

      </el-form>
      <el-button @click="visible = false">取 消</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button type="primary" @click="duotiaojian()">确 定</el-button>

      </span>
    </el-dialog>
    <el-dialog title="新增消缺任务" :visible="visible2" @close="visible2=false">
      <!--  <el-form ref="form"  label-width="80px">
         任务编号：<el-input v-model="rwbianhao" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
       </el-form> -->
      <el-form ref="form" label-width="80px">
        任务名称：<el-input v-model="input1" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-form ref="form" label-width="80px">
        工作单据：<el-input v-model="gzdj" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-form ref="form" label-width="80px">
        下发人员：<el-input v-model="input2" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-form ref="form" label-width="80px">
        下发时间：<span class="demonstration" style="width: 200px" label="right"></span>
        <el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>
      </el-form>
      <el-form ref="form" label-width="80px">
        任务状态： <el-select v-model="region" style="width: 200px" placeholder="请选择活动区域" label="right">
          <el-option label="待分配" value="待分配"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已分配" value="已分配"></el-option>
          <el-option label="执行中" value="执行中"></el-option>
        </el-select>
      </el-form>
      <el-form ref="form" label-width="80px">
        任务是否取消：<el-input v-model="input3" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
      </el-form>
      <el-button @click="visible2 = false">取 消</el-button>
      <el-button type="primary" @click="tianjia()">确 定</el-button>

      </span>
    </el-dialog>
    <el-button type="primary" @click="onSubmit()">查询</el-button>
    <el-button type="primary" @click="onSubmit2()">制定消缺任务</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column sortable prop="rwid" label="任务编号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rwid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rwname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工作单据">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.workdj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下发人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.xfuser }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下发时间">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.xfdate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rwzt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务完成时间">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.wcdate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.qx==1?'不取消':'取消' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-row>

            <el-dialog title="查看消缺任务" :visible="visible4" @close="visible4=false" v-model="sss">
              <el-form ref="form" label-width="80px">
                任务名称：<el-input v-model="sss.rwname" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                工作单据：<el-input v-model="sss.workdj" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                下发人员：<el-input v-model="sss.xfuser" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                下发时间：<el-input v-model="sss.xfdate" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
                完成时间：<el-input v-model="sss.wcdate" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                任务状态： <el-select plain disabled v-model="sss.rwzt" style="width: 200px" placeholder="请选择活动区域" label="right">
                  <el-option label="待分配" value="待分配"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                  <el-option label="已分配" value="已分配"></el-option>
                  <el-option label="执行中" value="执行中"></el-option>
                </el-select>
              </el-form>
              <el-form ref="form" label-width="80px">
                任务是否取消：<el-input v-model="sss.qx" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-button type="primary" @click="vs()">查看完毕，关闭</el-button>
            </el-dialog>


            <el-button type="text" @click="handleEdit1(scope.$index, scope.row)">查看</el-button>
            <el-button type="text" :disabled="scope.row.rwzt==='已分配'||scope.row.rwzt==='执行中'||scope.row.rwzt==='已完成' ||scope.row.qx===0">分配任务</el-button>

            <el-dialog title="修改消缺任务" :visible="visible3" @close="visible3=false" v-model="sss">
              <el-form ref="form" label-width="80px">
                任务名称：<el-input v-model="sss.rwname" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                工作单据：<el-input v-model="sss.workdj" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                下发人员：<el-input v-model="sss.xfuser" placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                下发时间：<el-input v-model="sss.xfdate" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
                完成时间：<el-input v-model="sss.wcdate" plain disabled placeholder="请输入内容" style="width: 200px" label="right"></el-input>
              </el-form>
              <el-form ref="form" label-width="80px">
                任务状态： <el-select v-model="sss.rwzt" style="width: 200px" placeholder="请选择活动区域" label="right">
                  <el-option label="待分配" value="待分配"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                  <el-option label="已分配" value="已分配"></el-option>
                  <el-option label="执行中" value="执行中"></el-option>
                </el-select>
              </el-form>
              <el-form ref="form" label-width="80px">
                任务是否取消： <el-select v-model="sss.qx" style="width: 200px" placeholder="请选择活动区域" label="right">
                  <el-option label="取消" value="0"></el-option>
                  <el-option label="不取消" value="1"></el-option>
                </el-select>
              </el-form>
              <el-button type="primary" @click="update()">确定修改</el-button>
            </el-dialog>

            <el-button type="text" @click="handleEdit(scope.$index, scope.row)" :disabled="scope.row.rwzt==='已分配'||scope.row.rwzt==='执行中' ||scope.row.qx===0">修改</el-button>
            <el-button type="text" @click="quxiao(scope.$index,scope.row)" :disabled="scope.row.rwzt==='已分配'||scope.row.rwzt==='执行中'||scope.row.rwzt==='已完成' || scope.row.qx===0">取消</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="page" @prev-click="page" @next-click="page" background layout="prev,pager,next,total,jumper"
      :total="total" :page-size="size"></el-pagination>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        qqx:'0',
        tableData: [],
        total: 0,
        form: '',
        dialogVisible: false,
        form1: {
          input1: '',
          region: '',
          input2: '',
        },
        input: '',
        input1: '',
        input2: '',
        input3: '',
        region: '',
        value1: '',
        visible: false,
        visible2: false,
        visible3: false,
        visible4: false,
        size: 2,
        /* rwbianhao:'', */
        gzdj: '',
        sss: {

          rwname: '',
          workdj: '',
          rwzt: '',
          xfuser: '',
          rwzt: '',
          qx: '',
          xfdate: '',
          wcdate: '',
          rwid: ''
        },
        //保存每次查询的条件
        searach: {}
      }

    },
    methods: {

      page: function(curpage) {
        //分页调用的方法，每次就直接调用【多条件查询】的方法。把当前的页面作为参数传递过去
        this.duotiaojian(curpage);
      },
      /* 修改 */
      handleEdit(index, row) {
        this.visible3 = true;
        console.log(row);
        this.sss.rwname = row.rwname;
        this.sss.workdj = row.workdj;
        this.sss.rwzt = row.rwzt;
        this.sss.xfuser = row.xfuser;
        this.sss.rwzt = row.rwzt;
        this.sss.qx = row.qx;
        this.sss.xfdate = row.xfdate;
        this.sss.wcdate = row.wcdate;
        this.sss.rwid = row.rwid;
      },
      /* 查看 */
      handleEdit1(index, row) {
        this.visible4 = true;
        console.log(row);
        this.sss.rwname = row.rwname;
        this.sss.workdj = row.workdj;
        this.sss.rwzt = row.rwzt;
        this.sss.xfuser = row.xfuser;
        this.sss.rwzt = row.rwzt;
        this.sss.qx = row.qx;
        this.sss.xfdate = row.xfdate;
        this.sss.wcdate = row.wcdate;
        this.sss.rwid = row.rwid;
      },
      onSubmit() {
        this.visible = true
      },
      onSubmit2() {
        this.visible2 = true
      },
      vs() {
        this.visible4 = false
      },
      FormClose() {
        console.log("关闭");
        this.$refs.ruleFrom.resetFields();
        this.visible = false;

      },
      //根据编号修改取消状态
      /* quxiao(index,row){

        this.$axios.post("xq/updateqx",{
          rwid:this.row.rwid,
          qx:this.qqx,
        })
      }, */
       quxiao(index,row){
                   this.$confirm('确定取消任务吗？', '提示', {
                           confirmButtonText: '确定',
                           cancelButtonText: '取消',
                           type: 'warning'
                         }).then(() => {
                           this.$axios.post("xq/updateqx",{qx:0,rwid:row.rwid}),
                           this.duotiaojian(),
                           this.$message({
                             type: 'success',
                             message: '取消成功!',

                           });
                         }).catch(() => {
                           this.$message({
                             type: 'info',
                             message: '取消失败'
                           });
                         });

                   },
      /*  updatesubmit(){
          this.visible3=true
        }, */

      /* 多条件查询 */
      duotiaojian(curpage = 1) {
        /* console.log(1)
         console.log(this.value1[0]) */
        this.$axios.post("/xq/duoiaojian", {
            rwname: this.input1,
            rwzt: this.region,
            xfuser: this.input2,
            xfdate: this.value1[0],
            wcdate: this.value1[1],
            pagenum: curpage,
            pagesize: this.size,
          })
          .then(vs => {
            /* console.log(this.input1);
             console.log(this.region);
             console.log(vs.data) */
            this.visible = false,
              this.tableData = vs.data.list,
              this.total = vs.data.total,
              console.log("size" + vs.data.size)
            console.log(this.tableData),
              console.log(this.total);

          }).catch(err => console.log(err));
      },
      /* 添加 */
      tianjia() {
        this.$axios.post("/xq/insert", {
            rwname: this.input1,
            workdj: this.gzdj,
            rwzt: this.region,
            xfuser: this.input2,
            xfdate: this.value1[0],
            region: this.rwzt,
            wcdate: this.value1[1],
            qx: this.input3
          })
          .then(vs => {
            /* console.log(this.input1);
             console.log(this.region);
             console.log(vs.data) */
            this.visible2 = false,
              this.tableData = vs.data.list,
              this.total = vs.data.total,
              console.log(this.tableData),
              console.log(this.total);
            this.duotiaojian();
          }).catch(err => console.log(err));
      },
      /* 修改 */

      update() {
        alert(this.sss.rwid);
        this.$axios.post("xq/update", {
          rwid: this.sss.rwid,
          rwname: this.sss.rwname,
          workdj: this.sss.workdj,
          rwzt: this.sss.rwzt,
          xfuser: this.sss.xfuser,
          rwzt: this.sss.rwzt,
          qx: this.sss.qx
        })
        this.visible3 = false
        this.duotiaojian();

      },
      //清空重置
      reset() {
        this.input1 = '';
        this.region = '';
        this.input2 = '';
        this.value1 = '';
        this.value1 = '';
      }


    },



    created: function() {

      /* axios.get("http://localhost:8085/all")
          .then(vs => this.options = vs.data,
             )
          .catch(err => console.log(err)); */
      this.duotiaojian();
    }
    /* 页面一加载就自动执行 */

  }
</script>

<style scoped="scoped">
  #app {}

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-table {
    margin-left: 0px;
    ;
  }



</style>
